<template>
  <page-container>
    <app-card>
      <template #header>
        数据筛选
      </template>
      <el-form
        ref="form"
        :model="listParams"
        :disabled="listLoading"
        label-width="70px"
        @submit.prevent="handleQuery"
      >
        <el-form-item label="时间选择">
          <el-button-group>
            <el-button
              v-for="btn in timeRange"
              :key="btn.value"
              :type="listParams.data === btn.value ? 'primary' : 'default'"
              plain
              @click="handleSetDate(btn.value)"
            >
              {{ btn.label }}
            </el-button>
          </el-button-group>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY/MM/DD"
            @change="handleSelectDateRange"
          />
        </el-form-item>
        <el-form-item label="评论状态">
          <el-select
            v-model="listParams.is_reply"
            placeholder="请选择"
            clearable
            @change="handleQuery"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品信息">
          <el-input
            v-model="listParams.store_name"
            placeholder="请输入商品ID或者商品信息"
            clearable
          />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input
            v-model="listParams.account"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="">
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="handleQuery"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </app-card>
    <app-card>
      <template #header>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >
          添加虚拟评论
        </el-button>
      </template>
      <app-table
        :list="list"
        :list-loading="listLoading"
        :list-config="listConfig"
      />
      <app-pagination
        v-model:page="listParams.page"
        v-model:limit="listParams.limit"
        :list-count="listCount"
        :load-list="handleQuery"
        :disabled="listLoading"
      />
    </app-card>
  </page-container>
  <rule-form
    v-model="formVisible"
    v-model:id="id"
    @success="handleFormSuccess"
  />
</template>

<script lang="tsx" setup>
import { ProductReply, ProductReplyParams } from '@/api/types/product'
import { onMounted, reactive, ref } from 'vue'
import * as api from '@/api/product'
import { ElMessage } from 'element-plus'
import RuleForm from './components/RuleForm.vue'

const formVisible = ref(false)
const listCount = ref(0)
const list = ref<ProductReply[]>([])
const listLoading = ref(false)
const timeRange = reactive([
  { label: '全部', value: '' },
  { label: '今天', value: 'today' },
  { label: '昨天', value: 'yesterday' },
  { label: '最近7天', value: 'lately7' },
  { label: '最近30天', value: 'lately30' },
  { label: '本月', value: 'month' },
  { label: '本年', value: 'year' }
])
const status = reactive([
  { label: '全部', value: '' },
  { label: '已回复', value: '1' },
  { label: '未回复', value: '0' }
])
const listConfig = reactive([
  { label: '评论ID', prop: 'id', align: 'center', width: 80 },
  {
    label: '商品信息',
    prop: 'store_name',
    formatter: (row: ProductReply) => {
      return (
        <div style="display: flex;">
          <el-image
            style="width: 50px; height: 50px"
            src={ row.image || './src/assets/logo_small.png' }
            previewSrcList={ [row.image] }
            fit="fill"
          ></el-image>
          { row.store_name }
        </div>
      )
    }
  },
  { label: '用户名称', prop: 'account' },
  { label: '评分', prop: 'score', sortable: true },
  {
    label: '评价内容',
    prop: 'comment',
    formatter: (row: ProductReply) => {
      return (
        <div>
          <span style="color: #2b85e4">{ row.comment }</span>
          {
            row.pics && row.pics.map(item => {
              return <el-image
                style="width: 50px; height: 50px"
                src={ item }
                previewSrcList={ row.pics }
                fit="fill"
              ></el-image>
            })
          }
        </div>
      )
    }
  },
  { label: '回复内容', prop: 'merchant_reply_content' },
  { label: '评价时间', prop: 'add_time', sortable: true },
  {
    label: '操作',
    minWidth: '120px',
    fixed: 'right',
    align: 'center',
    formatter: (row: ProductReply) => {
      return (
        <div>
          <el-button type="text" onClick={ () => { handleReply(row) } }>
            回复
          </el-button>
          <el-popconfirm
            title="确认删除吗？"
            onConfirm={ () => { handleDelete(row.id) } }
            v-slots={{
              reference: () => (
                <el-button type="text">
                  删除
                </el-button>
              )
            }}
          >
          </el-popconfirm>
        </div>
      )
    }
  }
])
const listParams = ref<ProductReplyParams>({
  page: 1,
  limit: 10,
  account: '',
  store_name: '',
  is_reply: '',
  product_id: '0',
  data: ''
})
const dateRange = ref([])
const id = ref<number | null>(null)

onMounted(() => {
  handleQuery()
})

const handleQuery = async () => {
  listLoading.value = true
  const data = await api
    .getProductReply(listParams.value)
    .finally(() => {
      listLoading.value = false
    })
  list.value = data.list
  listCount.value = data.count
}

const handleFormSuccess = () => {
  formVisible.value = false
  handleQuery()
}

const handleDelete = async (id: number) => {
  await api.removeProductReply(id)
  ElMessage.success('删除成功')
  handleQuery()
}

const handleSetDate = (val: string) => {
  listParams.value.data = val
  dateRange.value = []
  handleQuery()
}

const handleSelectDateRange = (val: string) => {
  if (val) {
    listParams.value.data = `${val[0]}-${val[1]}`
  } else {
    listParams.value.data = ''
  }
  handleQuery()
}

const handleReply = (row: ProductReply) => {
  id.value = row.id
  formVisible.value = true
}

const handleAdd = () => {
  ElMessage.error('图片上传功能不能使用，后续开放')
}

</script>

<style lang="scss" scoped>
</style>
